<template>
	<view class="uni_box home">
		<navbar title='权限兑换'>
		</navbar>
		<view class="content">
			<view class="quanview">
				<text class="shutit">请输入兑换码：</text>
				<view class="shuview">
					<u-input  v-model="code" type="text" :border="false" placeholder='请输入' :placeholder-style="placeholderStyle" />
				</view>
				<view class="shumiao">
					<view class="mitem">
						<text class="quan"></text>
						<text class="duitit">兑换码为数字和字母混合的16位字符串；</text>
					</view>
					<view class="mitem">
						<text class="quan"></text>
						<text class="duitit">一个兑换码只能兑换一次；</text>
					</view>
					<view class="mitem">
						<text class="quan"></text>
						<text class="duitit">兑换成功后，此兑换码自动作废；</text>
					</view>
					<view class="mitem">
						<text class="quan"></text>
						<text class="duitit">兑换码有效期30天，过期无效；</text>
					</view>
					<view class="mitem">
						<text class="quan"></text>
						<text class="duitit">如有疑问，请联系客服：yanyouhzzx</text>
					</view>
				</view>
				<view class="liji" @click="getdui">立即兑换</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name:'',
				code:'',
				placeholderStyle:"color: #c0c4cc;font-size: 24rpx;"
			}
		},
		onLoad() {
			
		},
		onShow() {
		},
		methods: {
			async getdui(){
				if(!this.code){
					this.$u.toast("请输入兑换码");
					return false;
				}
				let res = await this.$u.api.addVipOrder({
					code:this.code,
					shop_id:uni.getStorageSync('shop_id')
				});
				this.$u.toast("兑换成功");
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #F5F5F5;
	}
	.content{
		background-color: #F5F5F5;
		min-height: 100vh;
		padding: 20rpx 0;
		.quanview{
			margin:0 20rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 30rpx 30rpx;
			.shutit{
				font-size: 36rpx;
				font-family: Alimama ShuHeiTi;
				font-weight: bold;
				color: #333333;
			}
			.shuview{
				position: relative;
				height: 88rpx;
				background: #EEEEEE;
				border-radius: 16rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 0 20rpx;
				margin: 30rpx 0;
			}
			.shumiao{
				display: flex;
				flex-direction: column;
				.mitem{
					display: flex;
					flex-direction: row;
					align-items: center;
					.quan{
						width: 12rpx;
						height: 12rpx;
						background: #CCCCCC;
						border-radius: 50%;
						display: inline-block;
						margin-right: 8rpx;
					}
					.duitit{
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #666666;
					}
				}
			}
			.liji{
				height: 88rpx;
				background: #216CFE;
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 50rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
			}
		}
	}
</style>
